<template>
  <div v-loading="loading" class="app-container dialog">
    <div class="title">进出机房</div>
    <div class="Subhead">基本信息</div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-position="right"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input
          :readonly="taskName != '发起'"
          style="width: 760px"
          v-model="form.title"
        ></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="4">
          <el-form-item label="单位审核" prop="unit_audit">
            <el-radio-group @change="UnitAuditChange" v-model="form.unit_audit">
              <el-radio :disabled="taskName != '发起'" label="true"
                >是</el-radio
              >
              <el-radio :disabled="taskName != '发起'" label="false"
                >否</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="IsUnitAudit" label="审核单位" prop="Auditunit">
            <el-cascader
              :disabled="taskName != '发起'"
              :props="{ value: 'id', checkStrictly: true }"
              :show-all-levels="false"
              @change="deptChange"
              v-model="officeId"
              placeholder="请选择，可搜索"
              :options="dept"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-if="IsUnitAudit" label="审核人员" prop="Auditunit">
            <el-select
              :disabled="taskName != '发起'"
              clearable
              style="width: 200px"
              v-model="form.audit_person"
              :placeholder="
                form.officeId ? '请选择审核人员' : '请先选择审核部门'
              "
            >
              <el-option
                v-for="item in users"
                :key="item.userName"
                :label="item.nickName"
                :value="item.userName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="Subhead">需求信息</div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="机房名称" prop="machine_room_name">
            <el-select
              :disabled="taskName != '发起'"
              clearable
              filterable
              v-model="form.machine_room_name"
            >
              <el-option
                v-for="item in ComputerRoomNameList"
                :key="item.dictValue"
                :label="item.dictValue"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="进出时间" prop="in_out_time">
            <el-date-picker
              :disabled="taskName != '发起'"
              v-model="form.in_out_time"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="进出原因">
        <editor
          :readonly="taskName != '发起'"
          v-model="form.in_out_reason"
          style="min-height: 192px; max-height: 400px; overflow-y: auto"
          :min-height="192"
          :max-height="400"
        />
      </el-form-item>
      <div class="tabletitle">
        进出人员明细
        <img
          v-if="taskName == '发起'"
          style="width: 20px; cursor: pointer; vertical-align: middle"
          @click="add()"
          src="../../../assets/icons/add.png"
          alt=""
        />
      </div>
      <Table :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="name">
          <el-input
            :readonly="taskName != '发起'"
            v-model="data[index].name"
          ></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="IDNumber">
          <el-input
            :readonly="taskName != '发起'"
            v-model="data[index].IDNumber"
          ></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="Telephone">
          <el-input
            :readonly="taskName != '发起'"
            v-model="data[index].Telephone"
          ></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="remarks">
          <Input
            :readonly="taskName != '发起'"
            type="text"
            v-model="data[index].remarks"
          />
        </template>

        <template
          v-if="taskName == '发起'"
          slot-scope="{ row, index }"
          slot="action"
        >
          <Button type="error" @click="remove(index)">删除</Button>
        </template>
      </Table>
      <div class="tabletitle" style="margin-top: 30px">
        携带设备明细
        <img
          v-if="taskName == '发起'"
          style="width: 20px; cursor: pointer; vertical-align: middle"
          @click="loweradd()"
          src="../../../assets/icons/add.png"
          alt=""
        />
      </div>
      <Table :columns="lowercolumns" :data="lowerdata">
        <template slot-scope="{ row, index }" slot="inOut">
          <el-select
            :disabled="taskName != '发起'"
            clearable
            filterable
            v-model="lowerdata[index].inOut"
          >
            <el-option
              v-for="item in inOutList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot-scope="{ row, index }" slot="EquipmentType">
          <el-select
            :disabled="taskName != '发起'"
            clearable
            filterable
            v-model="lowerdata[index].EquipmentType"
          >
            <el-option
              v-for="item in EquipmentTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot-scope="{ row, index }" slot="brand">
          <el-input
            :disabled="taskName != '发起'"
            v-model="lowerdata[index].brand"
          ></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="EquipmentModel">
          <el-input
            :disabled="taskName != '发起'"
            v-model="lowerdata[index].EquipmentModel"
          ></el-input>
        </template>
        <template slot-scope="{ row, index }" slot="remarks">
          <Input
            :disabled="taskName != '发起'"
            type="text"
            v-model="lowerdata[index].remarks"
          />
        </template>

        <template
          v-if="taskName == '发起'"
          slot-scope="{ row, index }"
          slot="action"
        >
          <Button type="error" @click="lowerremove(index)">删除</Button>
        </template>
      </Table>
      <file-list
        ref="fileList"
        :fileList="form.files"
        @changeFileList="changeFileList"
        @upload="upload"
      />
    </el-form>
    <action-button
      v-if="taskName"
      :taskName="taskName"
      :loading="btnLoading"
      @changeExamineShow="changeExamineShow"
    />
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import { Getformdata, taskComplete } from "@/api/todoItem/todo.js";
import { getDicts } from "@/api/system/dict/data";
import fileList from "@/components/FileList/index.vue";
import actionButton from "@/components/actionButton/index.vue";
export default {
  name: "InOutComputerRoomsdetails",
  components: {
    Editor,
    fileList,
    actionButton,
  },
  data() {
    return {
      loading: false,
      taskName: "",
      title: "",
      taskId: "",
      definitionName: "",
      btnLoading: true,

      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      datetime: "",
      form: {
        unit_audit: "false",
        audit_unit: null,
        audit_person: null,
      },
      //部门列表树结构
      dept: [],
      //上云系统列表
      xtList: [],
      // 部门id
      officeId: "",
      // 关机时间下拉数组
      ShutDownList: [
        {
          id: "1",
          name: "上班时间",
        },
        {
          id: "2",
          name: "非上班时间",
        },
        {
          id: "3",
          name: "不能关闭",
        },
        {
          id: "4",
          name: "其他时间",
        },
      ],
      // 系统状态
      SystemStateList: [
        {
          id: "1",
          name: "从系统选择",
        },
        {
          id: "2",
          name: "其他",
        },
      ],
      // 操作系统下拉数据
      operatingSystemList: [
        {
          id: "1",
          name: "Linux",
        },
        {
          id: "2",
          name: "Windows",
        },
      ],
      // 网络环境下拉数据
      networkList: [
        {
          id: "1",
          name: "政务外网",
        },
        {
          id: "2",
          name: "互联网",
        },
      ],
      // 交互类型
      ExchangeType: [
        {
          id: "资源池内交互",
          name: "资源池内交互",
        },
        {
          id: "跨网交互",
          name: "跨网交互",
        },
        {
          id: "其他交互",
          name: "其他交互",
        },
      ],
      // 交互方式
      InteractionModeList: [
        {
          id: "协议交互",
          name: "协议交互",
        },
        {
          id: "文件交互",
          name: "文件交互",
        },
        {
          id: "数据库交互",
          name: "数据库交互",
        },
      ],
      // 协议下拉数据
      agreementList: [
        {
          id: "http",
          name: "http",
        },
        {
          id: "https",
          name: "https",
        },
        {
          id: "ftp",
          name: "ftp",
        },
        {
          id: "snmp",
          name: "snmp",
        },
        {
          id: "其他",
          name: "其他",
        },
      ],
      // 交互时间
      InteractionTimeList: [
        {
          id: "每月",
          name: "每月",
        },
        {
          id: "每周",
          name: "每周",
        },
        {
          id: "每天",
          name: "每天",
        },
        {
          id: "实时",
          name: "实时",
        },
        {
          id: "不定期",
          name: "不定期",
        },
        {
          id: "其他",
          name: "其他",
        },
      ],
      rules: {},
      applicationSystem: null,
      IpType: null,
      PortManage: null,
      port: null,
      portType: null,
      remarks: null,
      columns: [
        {
          title: "姓名",
          slot: "name",
        },
        {
          title: "身份证号",
          slot: "IDNumber",
        },
        {
          title: "电话",
          slot: "Telephone",
        },
        {
          title: "备注",
          slot: "remarks",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      lowercolumns: [
        {
          title: "带出/带入",
          slot: "inOut",
        },
        {
          title: "设备类型",
          slot: "EquipmentType",
        },
        {
          title: "品牌",
          slot: "brand",
        },
        {
          title: "设备型号",
          slot: "EquipmentModel",
        },
        {
          title: "备注",
          slot: "remarks",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      // 机房名称
      ComputerRoomNameList: [],
      inOutList: [
        {
          id: "带入",
          name: "带入",
        },
        {
          id: "带出",
          name: "带出",
        },
      ],
      EquipmentTypeList: [
        {
          id: "笔记本",
          name: "笔记本",
        },
        {
          id: "服务器",
          name: "服务器",
        },
        {
          id: "硬盘",
          name: "硬盘",
        },
        {
          id: "其他",
          name: "其他",
        },
      ],
      data: [],
      lowerdata: [],
      editIndex: -1, // 当前聚焦的输入框的行数
      editapplicationSystem: "",
      editIpType: "",
      editPortManage: "",
      editport: "",
      editportType: "",
      editremarks: "",
      IsUnitAudit: false,
      // 用户数据
      users: [],
    };
  },
  created() {
    getDicts("computer_room").then((response) => {
      this.ComputerRoomNameList = response.data;
    });
    this.Getdata();
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
    routerUrl() {
      return this.$route.path;
    },
  },
  watch: {
    visitedViews(value) {
      if (value) {
        if (this.$options.name == "InOutComputerRoomsdetails") {
          return;
        }
        this.$destroy(this.$options.name);
      }
    },
    routerUrl(value) {
      if (value == "/businessassistance/InOutComputerRooms/details") {
        this.Getdata();
      }
    },
  },
  methods: {
    changeFileList(fileList) {
      console.log(fileList, "ssssssss");
      this.$set(this.form, "files", fileList);
    },
    Getdata() {
      this.loading = true;
      this.GetListSelect();
      var list = JSON.parse(sessionStorage.getItem("InOutComputerRooms"));
      this.title = list.instanceName;
      this.taskId = list.taskId;
      this.definitionName = list.definitionName;
      this.taskName = list.taskName;
      this.btnLoading = false;
      Getformdata(list.instanceId)
        .then((res) => {
          this.form = res.data;
          this.fileList = res.data.files;
          if (this.form.unit_audit == "true") {
            this.IsUnitAudit = true;
            this.officeId = Number(this.form.audit_unit);
            this.deptChange([this.form.audit_unit]);
          }
          this.data = res.data.in_out_person_detailed;
          this.lowerdata = res.data.portable_equipment_detailed;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getName(data, id) {
      data.forEach((item) => {
        if (item.id == id) {
          this.form.officeName = item.label;
        } else if (item.children && item.children.length) {
          this.getName(item.children, id);
        }
      });
    },
    deptChange(e) {
      this.users = [];
      if (e.length) {
        this.form.audit_unit = e[e.length - 1];
        this.getName(this.dept, this.form.audit_unit);
        listUser2({
          deptId: this.form.audit_unit,
          pageNum: 1,
          pageSize: 10000000,
        }).then((response) => {
          this.users = response.rows;
        });
      }
    },
    UnitAuditChange(e) {
      if (e == "true") {
        this.IsUnitAudit = true;
      } else {
        this.IsUnitAudit = false;
        this.form.audit_unit = null;
        this.form.audit_person = null;
        this.officeId = null;
      }
    },
    GetListSelect() {
      treeselect({}).then((response) => {
        this.dept = response.data;
      });
      this.loading = true;
      AllcloudUpList().then((response) => {
        this.xtList = response.rows;
        this.loading = false;
      });
    },
    DeleteFile(data, index) {
      this.fileList = this.fileList.filter((item) => {
        if (item.uid == data.uid) {
        } else {
          return item;
        }
      });
    },
    add() {
      let addObj = JSON.parse(
        JSON.stringify({
          name: "",
          IDNumber: "",
          Telephone: "",
          remarks: "",
        })
      );
      this.data.push(addObj);
    },
    loweradd() {
      let addObj = JSON.parse(
        JSON.stringify({
          inOut: "带入",
          EquipmentType: "笔记本",
          brand: "",
          EquipmentModel: "",
          remarks: "",
          action: "",
        })
      );
      this.lowerdata.push(addObj);
    },
    handleSave(row, index) {
      this.data[index] = row;
    },
    remove(index) {
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.data.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    lowerremove(index) {
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.lowerdata.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    upload(files) {
      if (files) {
        this.form.in_out_person_detailed = this.data;
        this.form.portable_equipment_detailed = this.lowerdata;
        taskComplete({
          taskId: this.taskId,
          actionName: this.xnum == 1 ? "通过" : "不通过",
          action: this.xnum == 1 ? "COMPLETE" : "BACK",
          formData: this.form,
          formDefKey: this.form.formDefKey,
          files: files,
          comment: this.xvalue,
        })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.$store.state.tagsView.visitedViews.splice(
                this.$store.state.tagsView.visitedViews.findIndex(
                  (item) => item.path === this.$route.path
                ),
                1
              );
              this.$destroy(this.$options.name);
              this.$router.push("/todoItem/todo");
              this.loading = false;
            }
          })
          .catch((err) => {
            this.loading = false;
          });
      } else {
        this.loading = false;
      }
    },

    changeExamineShow(num, leble) {
      this.$prompt("请输入审批意见", num == 1 ? "通过" : "不通过", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        inputValue: num == 1 ? "通过" : "不通过",
      })
        .then((resp) => {
          this.xvalue = resp.value;
          this.xnum = num;
          this.loading = true;
          this.$refs.fileList.upload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .Subhead {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 2px solid #38b3aa;
  }
  .tabletitle {
    width: 100%;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgb(248, 248, 249);
    height: 40px;
    line-height: 40px;
    border-bottom: none;
  }
}
</style>
